<script setup lang="ts">
import {ref, onMounted, watchEffect} from "vue";
import {getNavHeadApi} from "@/api/home/homeHead/head";
import {getBannerListApi} from "@/api/home/banner/index";
import {getHomeNewListApi, getHomeHotListApi, getHomeBrandListApi} from '@/api/home/homeList/index'
import goods from '@/commpents/goodList/index.vue'
import banners from '@/commpents/banner/index.vue'
import homeList from '@/commpents/homeNewAndPeopleAndHot/index.vue'
import special from '@/commpents/special/index.vue'
import {useRouter} from "vue-router";
import { useIntersectionObserver } from '@vueuse/core'
import {observeDomAndCallFunction} from '@/utils/viewport/index'

//公共变量
const router = useRouter()

//dom元素
let homeNewDom = ref(null)
let homeHotDom = ref(null)
let homeBrandDom = ref(null)


//轮播

//定义左侧菜单数据
const bannerMenu = ref([]);
//定义轮播图数据
const bannerList = ref([]);
//获取右边栏数据
const rightMenu: any = ref([]);
//选择小标
let currentIndex: any = ref(null)
//控制右边显示
const showRightMenu = ref(false)
//骨架屏控制
const skeletonLoading = ref(true)

//获取数据
async function getNavHeadData() {
  let res = await getNavHeadApi()
  if (res.msg == '操作成功') {
    bannerMenu.value = res.result
    skeletonLoading.value = false
  }
}

//获取轮播图数据
async function getBannerListData() {
  let res = await getBannerListApi()
  if (res.msg == '操作成功') {
    bannerList.value = res.result
  }
}

//获取获取index
function checkIndex(index: number) {
  //获取右边栏数据
  rightMenu.value = bannerMenu.value[index].goods
  currentIndex.value = index
  showRightMenu.value = true
}

//隐藏右边栏
function hideRightMenu() {
  showRightMenu.value = false
  //将下标清空
  currentIndex.value = null
}


//首页新鲜好物

//定义数据
const homeNewList = ref([])
//新鲜好物骨架屏
const homeNewSkeletonLoading = ref(true)

//获取首页新鲜好物数据
async function getHomeNewListData() {
  let res = await getHomeNewListApi()
  if (res.msg == '操作成功') {
    homeNewList.value = res.result
    setTimeout(() => {
      homeNewSkeletonLoading.value = false
    }, 2000)

  }
}


//获首页热门推荐数据
const homeHotList = ref([])
//热门推荐骨架屏
const homeHotSkeletonLoading = ref(true)

//获取首页热门推荐数据
async function getHomeHotListData() {
  let res = await getHomeHotListApi()
  if (res.msg == '操作成功') {
    homeHotList.value = res.result
    setTimeout(() => {
      homeHotSkeletonLoading.value = false
    }, 2000)
  }
}


//首页热门品牌
const homeBrandList: any = ref([])
//分割数组
//热门品牌骨架屏
const homeBrandSkeletonLoading = ref(true)

//获取首页热门品牌数据
async function getHomeBrandListData() {
  let res = await getHomeBrandListApi()
  if (res.msg == '操作成功') {
    homeBrandList.value = res.result
    homeBrandList.value = splitArrayIntoTwoAndWrap(homeBrandList.value)
    setTimeout(() => {
      homeBrandSkeletonLoading.value = false
    }, 2000)
  }
}

// 数组分割
function splitArrayIntoTwoAndWrap(arr: Array<any>) {
  // 确保数组长度不是0
  if (arr.length === 0) {
    return [arr]; // 或者根据需要返回其他值，比如空数组[]
  }

  const middle = Math.floor(arr.length / 2);
  const firstHalf = arr.slice(0, middle);
  const secondHalf = arr.slice(middle);

  // 创建一个新数组，其元素是原始数组的两部分
  return [firstHalf, secondHalf];
}


//跳转详情页
function goGoodsItem(item: object) {
  router.push({
    name: 'detail',
    params: {
      id: item.id
    }
  })
}


observeDomAndCallFunction(homeHotDom, getHomeHotListData)
observeDomAndCallFunction(homeBrandDom, getHomeBrandListData)
// const { stop } = useIntersectionObserver(
//     homeHotDom,
//     ([{ isIntersecting }]) => {
//       if (isIntersecting) {
//         getHomeHotListData()
//         stop()
//       }
//     },
// )




onMounted(() => {
  getBannerListData()
  getNavHeadData()
  getHomeNewListData()
  getHomeBrandListData()
})

</script>

<template>
  <!--  轮播图 -->
  <div class="banner">
    <div class="banner-heart" @mouseleave="hideRightMenu">
      <banners>
        <template #content>
          <div class="banner-img">
            <el-carousel motion-blur height="42rem" :motion-blur="true" trigger="click">
              <el-carousel-item v-for="item in bannerList" :key="item.id">
                <img :src="item.imgUrl">
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
        <template #mask>
          <div class="mask">
            <ul class="banner-mask-ul"
            >
              <li class="banner-mask-li" v-for="(item, index) in bannerMenu" :key="item.id"
                  @mouseenter="checkIndex(index)" :class="{bannerActive: index === currentIndex}">

                <el-skeleton :loading="skeletonLoading" :animated="true">
                  <template #template>
                    <div class="skeleton-item">
                      <el-skeleton-item style="height: 1.66rem;"></el-skeleton-item>
                    </div>
                  </template>
                  <template #default>
                    <span class="text-title">{{ item.name }} </span>
                    <span class="text-desc">茶咖酒局 水具杯壶</span>
                  </template>
                </el-skeleton>
              </li>
            </ul>
          </div>

        </template>
      </banners>
      <div class="banner-mask-li-content" v-if="showRightMenu">
        <div class="bmlc-title">
          <span class="text-title">分类推荐 </span>
          <span>根据您的喜好，精选推荐</span>
        </div>
        <div class="bmlc-content ">
          <div class="bmlc-content-item" v-for="(item,index) in rightMenu" @click="goGoodsItem(item)">
            <div class="bmlc-content-item-img">
              <img
                  :src="item.picture">
            </div>
            <div class="bmlc-content-item-text">
              <div class="bcit-top">
                <span>{{ item.name }}</span>
              </div>
              <div class="middle">
                <span>{{ item.desc }}</span>
              </div>
              <div class="bcit-bottom">
                <span>￥{{ item.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  homeList -->
  <div class="homeList" >
    <!--  新鲜好物 -->
    <div class="homeList-new" ref="homeNewDom">
      <div class="homeList-new-heart">
        <div class="home-new-title">
          <div class="home-title-left">
            <span class="home-title-left-text">新鲜好物</span>
            <span>新鲜出炉 品质靠谱</span>
          </div>
          <div class="home-title-right">
            <span>查看全部</span>
            <i class="iconfont icon-xiangyou"></i>
          </div>
        </div>
        <div class="home-new-content">
          <el-skeleton :loading="homeNewSkeletonLoading" :animated="true">
            <template #template>
              <div style="display:flex;gap:0.83rem;width: 100%">
                <el-skeleton-item variant="image" style="width: calc(25% - 0.83rem);height: 400px;"></el-skeleton-item>
                <el-skeleton-item variant="image" style="width: calc(25% - 0.83rem);height: 400px;"></el-skeleton-item>
                <el-skeleton-item variant="image" style="width: calc(25% - 0.83rem);height: 400px;"></el-skeleton-item>
                <el-skeleton-item variant="image" style="width: calc(25% - 0.83rem);height: 400px;"></el-skeleton-item>
              </div>
            </template>
            <template #default>
              <div class="home-new-content-item" v-for="(item,index) in homeNewList" :key="item.id"
                   @click="goGoodsItem(item)">
                <homeList>
                  <template #img>
                    <img v-lazy-img="item.picture">
                  </template>
                  <template #desc>
                    <div class="home-new-desc">
                      <div class="home-new-desc-top">
                        <span>{{ item.name }}</span>
                      </div>
                      <div class="home-new-desc-bottom">
                        <span>￥{{ item.price }}</span>
                      </div>
                    </div>
                  </template>
                </homeList>
              </div>
            </template>
          </el-skeleton>
        </div>
      </div>
    </div >
    <!-- 人气推荐 -->
    <div class="homeList-hot" ref="homeHotDom">
      <div class="homeList-new-heart">
        <div class="home-new-title">
          <div class="home-title-left">
            <span class="home-title-left-text">人气推荐</span>
            <span>人气爆款 不容错过</span>
          </div>
          <div class="home-title-right">

          </div>
        </div>
        <div class="home-new-content">
          <el-skeleton :loading="homeNewSkeletonLoading" :animated="true">
            <template #template>
              <div style="display:flex;gap:0.83rem;width: 100%">
                <el-skeleton-item variant="image" style="width: calc(25% - 0.83rem);height: 500px;"></el-skeleton-item>
                <el-skeleton-item variant="image" style="width: calc(25% - 0.83rem);height: 500px;"></el-skeleton-item>
                <el-skeleton-item variant="image" style="width: calc(25% - 0.83rem);height: 500px;"></el-skeleton-item>
                <el-skeleton-item variant="image" style="width: calc(25% - 0.83rem);height: 500px;"></el-skeleton-item>
              </div>
            </template>
            <template #default>
              <div class="home-new-content-item" v-for="(item,index) in homeHotList" :key="item.id">
                <homeList>
                  <template #img>
                    <img v-lazy-img="item.picture">
                  </template>
                  <template #desc>
                    <div class="home-hot-desc">
                      <div class="home-new-desc-top">
                        <span>{{ item.title }}</span>
                      </div>
                      <div class="home-hot-desc-bottom">
                        <span>{{ item.alt }}</span>
                      </div>
                    </div>
                  </template>
                </homeList>
              </div>
            </template>
          </el-skeleton>

        </div>
      </div>
    </div>
    <!-- 热门品牌-->
    <div class="homeList-brand" ref="homeBrandDom">
      <div class="homeList-brand-heart">
        <div class="home-new-title">
          <div class="home-title-left">
            <span class="home-title-left-text">热门品牌</span>
            <span>国际经典 品质保证</span>
          </div>
          <div class="home-title-right">

          </div>
        </div>
        <div class="homeList-brand-content">
          <el-skeleton style="width: 100%" :loading="homeBrandSkeletonLoading" animated>
            <template #template>
              <div class="homeList-brand-content-skeleton-list">
                <el-skeleton-item variant="image"
                                  style="width: calc(100% / 5 - 0.83rem); height: 33.33rem"></el-skeleton-item>
                <el-skeleton-item variant="image"
                                  style="width: calc(100% / 5 - 0.83rem); height: 33.33rem"></el-skeleton-item>
                <el-skeleton-item variant="image"
                                  style="width: calc(100% / 5 - 0.83rem); height: 33.33rem"></el-skeleton-item>
                <el-skeleton-item variant="image"
                                  style="width: calc(100% / 5 - 0.83rem); height: 33.33rem"></el-skeleton-item>
                <el-skeleton-item variant="image"
                                  style="width: calc(100% / 5 - 0.83rem); height: 33.33rem"></el-skeleton-item>
              </div>
            </template>
            <template #default>
              <el-carousel indicator-position="none" height="33.33rem" :autoplay="false">
                <el-carousel-item v-for="(item,index) in homeBrandList" :key="index">
                  <div class="homeList-brand-content-list">
                    <div class="homeList-brand-content-item" v-for="(brand,index) in item" :key="brand.id">
                      <img
                          v-lazy-img="brand.picture">
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </template>
          </el-skeleton>
        </div>
      </div>
    </div>
  </div  >
  <!--  goodList -->
  <div class="goodList">
    <div class="goodList-heart">
      <goods></goods>
    </div>
  </div>
  <!--  最新专题 -->
  <div class="new-special" >
    <div class="new-special-heart">
      <special></special>
    </div>
  </div>
</template>

<style scoped>
.banner {
  width: 100%;
  background-color: #f5f5f5;
}

.banner-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
  position: relative;
}

.banner-img {
  width: 100%;
}

.banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

span {
  color: #fff;
}

.banner-mask-li {
  cursor: pointer;
  font-size: 16px;
}

.banner-mask-ul {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  text-align: center;
}

.banner-mask-li {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.banner-mask-li .text-desc {
  margin-left: 5px;
}

.bannerActive {
  background-color: var(--primary-color)
}

.banner-mask-li-content {
  position: absolute;
  left: 21rem;
  width: calc(100% - 21rem);
  top: 0;
  background-color: rgba(255, 255, 255, .5);
  padding: 1.6rem 2.5rem;
  box-sizing: border-box;
  height: 100%;
}

.bmlc-title {
  margin-bottom: 1.6rem;
}

.bmlc-title .text-title {
  color: #333;
  font-size: 2rem;
}

.bmlc-title span {
  color: #c2c2c2;
  font-size: 1.3rem;
}

.bmlc-content-item-img {
  width: 100px;
  height: 100px;
}

.bmlc-content-item-img img {
  width: 100%;
  height: 100%;
}

.bmlc-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

}

.bmlc-content-item {
  background-color: #f5f5f5;
  display: flex;
  padding: 0.83rem;
  gap: 0.83rem;
  transition: all 0.3s;
}

.bcit-top span {
  font-size: 1.45rem;
  color: #666;
}

.middle {
  white-space: nowrap;
  /* 隐藏溢出的内容 */
  overflow: hidden;
  /* 使用省略号表示文本被截断 */
  text-overflow: ellipsis;
}

.middle span {
  font-size: 1.1rem;
  color: #999;

}

.bcit-bottom span {
  font-size: 1.8rem;
  color: #f10;
}

.bmlc-content-item:hover {
  background-color: #a2e1d3;
  cursor: pointer;
}

.skeleton-item {
  padding: 0 1.66rem;
  box-sizing: border-box;
}

.homeList {
  margin-top: 4.16rem;
}

.homeList-new {
  width: 100%;
}

.homeList-hot {
  width: 100%;
  margin-top: 4.16rem;
  margin-bottom: 4.16rem;
}

.homeList-new-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
}

.home-title-left .home-title-left-text {
  font-size: 2.6rem;
  color: #333;
  display: inline-block;
  margin-right: 1.6rem;
}

.home-title-left span {
  font-size: 1.33rem;
  color: #999;
}

.home-title-right span, .home-title-right i {
  font-size: 1.33rem;
  color: #999;
}

.home-new-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4.16rem;
}


.home-new-desc-top span {
  font-size: 1.5rem;
  color: #333;

}

.home-new-desc-bottom span {
  display: inline-block;
  width: 100%;
  font-size: 1.8rem;
  color: #f10;

}

.home-hot-desc-bottom span {
  font-size: 1.8rem;
  color: #999;
}

.home-new-content {
  display: flex;
  gap: 0.83rem;
}

.home-new-content-item {
  transition: all 0.3s;
}

.home-new-content-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}

.home-new-content-item img {
  width: 100%;
}

.home-new-desc {
  background-color: #f0f9f4;
  height: 9.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.66rem 1.25rem;
  box-sizing: border-box;
}

.home-hot-desc {
  padding: 1.25rem 1.66rem;
  box-sizing: border-box;
  background-color: #fff;
}

.home-new-desc-bottom, .home-hot-desc-bottom {
  margin-top: 1.25rem;
}

.homeList-brand {
  width: 100%;
  background-color: #f5f5f5;
  padding: 4.16rem 0;
  box-sizing: border-box;
}

.homeList-brand-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
}

.homeList-brand-content-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.83rem;
}

.homeList-brand-content-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homeList-brand .el-carousel__arrow .el-carousel__arrow--left:deep {
  background-color: var(--primary-color) !important;
}

.homeList-brand-content-skeleton-list {
  display: flex;
  width: 100%;
  gap: 0.83rem;
}

.goodList {
  width: 100%;
  background-color: #fff;
  padding: 4.16rem 0;
  box-sizing: border-box;
}

.goodList-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
}

.new-special {
  width: 100%;
  background-color: #f5f5f5;
  padding: 4.16rem 0;
  box-sizing: border-box;
}

.new-special-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
}

.mask {
  width: 21rem;
  background: rgba(0, 0, 0, .8);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 20;
}
</style>